<template>
  <div class="box-hot">
    <div class="bar">
      <div class="bar_list">
        <div class="bar_item"
             v-for="item in props.data"
             :key="item.id"
             @click="handleClick(item.id,item.lists)"
             :class="item.id===selectItem?'active':null"
        >
          {{ item.label }}
        </div>
      </div>
    </div>

    <div class="hot-info-message">
      <div class="hot-info-item"
           v-for="item in listData"
           :key="item.xid">
                    <span>
                     {{ item.name }}
                    </span>
      </div>
    </div>

  </div>

</template>

<script lang="ts" setup>
import {onBeforeMount, onMounted, ref} from "vue";

const selectItem = ref("0001")

const props = defineProps({
  data: {
    required: true
  }
})
type Data = {
  xid: string,
  label: string,
  lists: Array<Item>
}

onBeforeMount(() => {
  const list = props.data as Array<Data>
  listData = list[0].lists
})
type Item = {
  xid: number,
  name: string,
  url: string
}

let listData: Array<Item> = []

// 可变化导航栏
const handleClick = (index: string, list: Array<Item>) => {
  selectItem.value = index
  listData = list
}


</script>

<style lang="less" scoped>


.box-hot {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;


  .bar {
    width: 100%;
    height: 50px;

    .bar_list {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 20px;

      justify-content: space-between;

      .bar_item {
        display: block;
        cursor: pointer;
      }

      .active {
        border-bottom-width: 4px;
        border-bottom-color: #7873f5;
        border-bottom-style: groove;
        transition: 0.5s;
      }

      .active:before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

    }
  }


  .hot-info-message {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-y: hidden;
    padding: 0 10px;
    flex-direction: column;
    font-size: 14px;
    justify-content: space-evenly;

    .hot-info-item {
      color: white;
      letter-spacing: 2px;
      padding: 1px 10px;
      display: inline-block;
      cursor: pointer;
    }

    .hot-info-item:hover {
      color: #282828;
    }
  }

}
</style>